<template>
  <div class="a" style="margin-left: 10px">
    <h1>{{ title }}</h1>
    <h2>2222222222</h2>
    <button @click="zichuanfu">子传父 对象</button>
    <button @click="zichuanfu2">子传父 数组</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { reactive, computed } from "vue";

// 父传子
type Prop = {
  title?: string;
  list: number[];
};
// prop接受参数
// 在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的：
// defineProps<Prop>(); 支持 js、ts

// 设置prop默认值 仅限ts
withDefaults(defineProps<Prop>(), {
  title: "我是默认值",
  // 复杂数据类型需要一个函数return
  list: () => [1, 2, 3, 4, 5, 6],
});

// 子组件给父组件传参
const obj = reactive({
  a: 1,
  b: 2,
  c: 3,
});

const arr = reactive<Prop["list"]>([15, 12, 16, 2, 5, 7]);
const emit = defineEmits(["zifu", "zifu2"]);

const zichuanfu = () => {
  console.log("子传父事件");
  emit("zifu", obj);
};

const zichuanfu2 = () => {
  console.log("子传父事件");
  emit("zifu2", arr);
};

// 使用 <script setup> 的组件是默认关闭的
// 子组件暴露出去的数据
defineExpose({
  obj,
  arr,
});
</script>
<script lang="ts">
export default {
  name: "Aaa",
};
</script>
<style lang="less" scoped>
.prop {
  height: 100vh;
  width: 100vh;
  font-size: 20px;
  overflow: auto;
}
</style>
